// 侧边栏
import React ,{Component} from 'react';
//import { Layout } from 'antd';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';

const { SubMenu } = Menu;
import { withRouter, Link } from 'react-router-dom';
import routes from '../routes/config';

const { Sider } = Layout;
let data = [
    [
        {
            a:{title:'2',id:'1'}, //二级条目
            b:[
                {title:'3',id:'2'}, //三级条目
                {title:'3',id:'3'}
            ]
        },
        {
            a:{title:'2',id:'4'}, //二级条目
            b:[
                
            ]
        }
    ],
        [
        {
            a:{title:'2',id:'5'}, //二级条目
            b:[
                {title:'3',id:'6'}, //三级条目
                {title:'3',id:'7'}
            ]
        },
        {
            a:{title:'2',id:'8'}, //二级条目
            b:[
                
            ]
        }
    ],    [
        {
            a:{title:'2',id:'8'}, //二级条目
            b:[
                {title:'3',id:'9'}, //三级条目
                {title:'3',id:'10'}
            ]
        },
        {
            a:{title:'2',id:'11'}, //二级条目
            b:[
                
            ]
        }
    ],    [
        {
            a:{title:'2',id:'12'}, //二级条目
            b:[
                {title:'3',id:'13'}, //三级条目
                {title:'3',id:'14'}
            ]
        },
        {
            a:{title:'2',id:'15'}, //二级条目
            b:[
                
            ]
        }
    ],    [
        {
            a:{title:'2',id:'16'}, //二级条目
            b:[
                {title:'3',id:'17'}, //三级条目
                {title:'3',id:'18'}
            ]
        },
        {
            a:{title:'2',id:'19'}, //二级条目
            b:[
                
            ]
        }
    ],    [
        {
            a:{title:'2',id:'21'}, //二级条目
            b:[
                {title:'3',id:'22'}, //三级条目
                {title:'3',id:'23'}
            ]
        },
        {
            a:{title:'2',id:'24'}, //二级条目
            b:[
                
            ]
        }
    ],    [
        {
            a:{title:'2',id:'25'}, //二级条目
            b:[
                {title:'3',id:'26'}, //三级条目
                {title:'3',id:'27'}
            ]
        },
        {
            a:{title:'2',id:'28'}, //二级条目
            b:[
                
            ]
        }
    ]
]
// console.log(routes.menus)
for(let i = 1;i<routes.menus.length;i++){
    routes.menus[i].data = data[i-1]
}
//检测元素是否有二级菜单
const renderSubMenu = (item)=>{
    if(item.data){
        return item.data
    }else{
        item.data = []
        return item.data
    }
}
//检测是否有三级菜单
// const renderThreeMenu = (item)=>{
//     if(item.b.length){

//     }
// }

class SiderCustom extends Component{
    constructor(props, context){
        super(props, context);
        this.state = {
            current: '',
            openKeys: [],
            data : routes.menus
          };
    }
    render(){
        let {data} = this.state
        return(
            <Sider 
                style={{ overflowY: 'auto' }}
                trigger={null}
                breakpoint="lg"   //触发适配
                collapsed={this.props.collapsed}  //当前收起状态
            >
                <div className="logo"></div>
            <Menu
              mode="inline"
             
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {data.map((item,index)=>{
                    let url = item.key
                return <SubMenu key={item.key} title={<span>{item.title}</span>}>
                {
                    //循环二级菜单
                   renderSubMenu(item).map((item,index)=>{
                        //如果有三级菜单
                        if(item.b.length){
                            return <SubMenu key={item.a.id} title={<span>{item.a.title}</span>}>
                            {
                                //循环三级菜单
                                item.b.map((item,index)=>{
                                return <Menu.Item key={item.id}>
                                            <Link to={{pathname:url,query:{id:item.id}}} replace>
                                                <span className="nav-text">{item.title}</span>
                                            </Link>    
                                        </Menu.Item>
                                })
                            }
                             </SubMenu>
                        }else{
                            //无三级菜单
                            return <Menu.Item key={item.a.id}>
                                        <Link to={{pathname:url,query:{id:item.a.id}}} replace>
                                            <span className="nav-text">{item.a.title}</span>
                                        </Link>
                                    </Menu.Item>
                        }
                       
                   })
                }
                </SubMenu>
              })}  
            </Menu>
          </Sider> 
        )
    }
}


export default withRouter(SiderCustom)